<template>
  <div class="vera">
    <div class="container">
      <div class="page-header">
        <h1>红龙维拉专题</h1>
        <p class="subtitle">深入解析 DDO 中最具标志性的反派角色</p>
      </div>

      <div class="vera-hero">
        <div class="vera-image">
          <img src="/images/vera-dragon.svg" alt="红龙维拉" />
        </div>
        <div class="vera-intro">
          <h2>维拉 - 红龙女王</h2>
          <p class="intro-text">维拉（Vera）是《龙与地下城Online》中最具标志性的反派角色之一。作为一条强大的红龙，她盘踞在艾伯伦世界的风暴之港，是玩家们最难忘的Boss战之一。</p>
          <div class="vera-stats">
            <div class="stat-item">
              <span class="stat-label">种族:</span>
              <span class="stat-value">红龙</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">等级:</span>
              <span class="stat-value">传奇</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">阵营:</span>
              <span class="stat-value">混乱邪恶</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">所在地:</span>
              <span class="stat-value">风暴之港</span>
            </div>
          </div>
        </div>
      </div>

      <div class="content-section">
        <div class="section-card">
          <h2>背景故事</h2>
          <p>维拉原本是卡伦帝国的守护龙，肩负着保护帝国宝藏的重任。然而，随着时间的推移，她逐渐被贪婪所腐蚀，开始将帝国的财宝据为己有。当卡伦帝国衰落之后，维拉占据了帝国的遗迹，并将风暴之港作为自己的巢穴。</p>
          <p>她统治着风暴之港的地下世界，与城市中的各种势力进行着复杂的博弈。她的存在既是威胁，也是平衡力量的一部分，使得风暴之港保持着微妙的权力平衡。</p>
        </div>

        <div class="section-card">
          <h2>战斗机制</h2>
          <p>维拉的战斗分为多个阶段，每个阶段都有不同的技能和攻击模式：</p>
          
          <div class="mechanics-grid">
            <div class="mechanic-item">
              <h3>第一阶段</h3>
              <p>维拉主要使用物理攻击和火焰吐息，相对较为简单</p>
            </div>
            
            <div class="mechanic-item">
              <h3>第二阶段</h3>
              <p>血量降至75%时进入，开始使用更强大的火焰技能</p>
            </div>
            
            <div class="mechanic-item">
              <h3>第三阶段</h3>
              <p>血量降至50%时进入，获得魔法抗性和新技能</p>
            </div>
            
            <div class="mechanic-item">
              <h3>第四阶段</h3>
              <p>血量降至25%时进入，攻击速度和伤害大幅提升</p>
            </div>
          </div>
          
          <div class="strategy-tip">
            <h3>战斗策略提示</h3>
            <p>团队需要合理分配角色职责，坦克注意仇恨控制，治疗者关注团队血线，输出职业注意走位和减伤技能的使用。</p>
          </div>
        </div>

        <div class="section-card">
          <h2>相关任务</h2>
          <div class="quests-list">
            <div class="quest-item">
              <h3>红龙之怒</h3>
              <p class="quest-level">等级要求: 15级</p>
              <p>玩家需要深入维拉的巢穴，阻止她对风暴之港的进一步破坏。</p>
            </div>
            
            <div class="quest-item">
              <h3>龙之宝藏</h3>
              <p class="quest-level">等级要求: 12级</p>
              <p>寻找并回收被维拉占据的卡伦帝国宝藏。</p>
            </div>
            
            <div class="quest-item">
              <h3>龙语的秘密</h3>
              <p class="quest-level">等级要求: 18级</p>
              <p>解读维拉巢穴中的古代龙语铭文，揭示她的真正意图。</p>
            </div>
          </div>
        </div>

        <div class="section-card">
          <h2>掉落物品</h2>
          <p>击败维拉有几率获得以下珍贵物品：</p>
          
          <div class="items-grid">
            <div class="item-category">
              <h3>武器</h3>
              <ul>
                <li>维拉的龙牙匕首</li>
                <li>红龙之怒法杖</li>
              </ul>
            </div>
            
            <div class="item-category">
              <h3>防具</h3>
              <ul>
                <li>龙鳞胸甲</li>
                <li>火焰抗性护手</li>
              </ul>
            </div>
            
            <div class="item-category">
              <h3>饰品</h3>
              <ul>
                <li>龙之心项链</li>
                <li>红龙之眼戒指</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Vera'
}
</script>

<style scoped>
.vera {
  min-height: 100vh;
  background: #0a0e17;
  color: #e0e0e0;
  padding: 50px 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 60px;
}

.page-header h1 {
  font-size: 3rem;
  color: #ff4d4d;
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

.subtitle {
  font-size: 1.3rem;
  color: #ffd700;
}

.vera-hero {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 60px;
  background: rgba(30, 41, 59, 0.7);
  border-radius: 10px;
  padding: 40px;
  border: 1px solid rgba(255, 77, 77, 0.2);
  backdrop-filter: blur(10px);
}

.vera-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vera-image img {
  max-width: 100%;
  border: 3px solid #ff4d4d;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.vera-intro h2 {
  font-size: 2.5rem;
  color: #ff4d4d;
  margin-bottom: 20px;
}

.intro-text {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #cccccc;
  margin-bottom: 30px;
}

.vera-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-weight: bold;
  color: #4d79ff;
  margin-bottom: 5px;
}

.stat-value {
  color: #ffd700;
}

.content-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-card {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 10px;
  padding: 40px;
  border: 1px solid rgba(77, 121, 255, 0.2);
  backdrop-filter: blur(10px);
}

.section-card h2 {
  font-size: 2rem;
  color: #ff4d4d;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}

.section-card h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, #ff4d4d, transparent);
}

.section-card p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #cccccc;
  margin-bottom: 20px;
}

.mechanics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.mechanic-item {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 8px;
  padding: 20px;
  border-left: 3px solid #ff4d4d;
}

.mechanic-item h3 {
  color: #ffd700;
  margin-bottom: 10px;
}

.mechanic-item p {
  margin: 0;
  font-size: 1rem;
}

.strategy-tip {
  background: rgba(77, 121, 255, 0.2);
  border-radius: 8px;
  padding: 25px;
  border-left: 4px solid #4d79ff;
  margin-top: 30px;
}

.strategy-tip h3 {
  color: #4d79ff;
  margin-bottom: 15px;
}

.quests-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.quest-item {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 8px;
  padding: 25px;
  border-top: 2px solid #ffd700;
}

.quest-item h3 {
  color: #ffd700;
  margin-bottom: 5px;
}

.quest-level {
  color: #4d79ff;
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.quest-item p {
  margin: 0;
  font-size: 1rem;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.item-category h3 {
  color: #4dff88;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(77, 255, 136, 0.3);
}

.item-category ul {
  padding-left: 20px;
}

.item-category li {
  margin-bottom: 10px;
  color: #cccccc;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .vera-hero {
    grid-template-columns: 1fr;
  }
  
  .page-header h1 {
    font-size: 2.5rem;
  }
  
  .vera-intro h2 {
    text-align: center;
  }
  
  .vera-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1.1rem;
  }
  
  .section-card {
    padding: 25px;
  }
  
  .section-card h2 {
    font-size: 1.7rem;
  }
  
  .mechanics-grid,
  .quests-list,
  .items-grid {
    grid-template-columns: 1fr;
  }
}
</style>